import React, { useState, useEffect} from 'react'
import { useNavigate } from 'react-router-dom'
import { List, Switch } from 'antd-mobile'
import { ArrowLeft } from '@nutui/icons-react'
import { NavBar, Button } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import axios from 'axios'
export default function Safe() {
    let navigate = useNavigate()
    let [flag1,setFlag1] = useState(false)
    let [flag2,setFlag2] = useState(false)
    let [flag3,setFlag3] = useState(false)
    let [flag4,setFlag4] = useState(false)
    let [flag5,setFlag5] = useState(false)
    let [id,setId] = useState("66680edd99dcf23902953a43")
    let [datas, setDatas] = useState([])
    useEffect(() => {
       getuser(id) 
    },[])
    let getuser = async(id)=>{
        let res = await axios.get("http://123.57.180.216:3000/userdata",{params:{_id:id}})
        console.log(res.data.list);
        setDatas(res.data.list)
    }
    let phone = datas.phone
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => window.history.back()}
            >
                账号安全
            </NavBar>
            <List>
                <List.Item onClick={() => navigate(`/editphone?phone=${phone}`)}>
                    <span style={{ color: "gray" }}>手机账号<br></br><span>{phone}</span></span>
                    <span style={{ marginLeft: "40%", position: "fixed", top: "90px" }}>更改号码</span>
                </List.Item>
            </List>
            <div style={{ width: "100%", height: "50px", backgroundColor: "skyblue", paddingTop: "18px", boxSizing: "border-box",paddingLeft:"12px" }}>其他社交账号</div>
            <List>
                <List.Item onClick={() => setFlag1(!flag1)}>
                    <img src='./微信.png' alt='' width="40px" height="40px"></img>
                    <span style={{marginLeft:"20px",position:"fixed",top:"220px"}}>微信</span>
                    <span style={{marginLeft:"260px",position:"fixed",top:"220px"}}>{flag1?"已绑定":"未绑定"}</span>
                </List.Item>
                <List.Item onClick={() => setFlag2(!flag2)}>
                    <img src='./支付宝.png' alt='' width="40px" height="40px"></img>
                    <span style={{marginLeft:"20px",position:"fixed",top:"293px"}}>支付宝</span>
                    <span style={{marginLeft:"260px",position:"fixed",top:"293px"}}>{flag2?"已绑定":"未绑定"}</span>
                </List.Item>
                <List.Item onClick={() => setFlag3(!flag3)}>
                    <img src='./淘宝.png' alt='' width="40px" height="40px"></img>
                    <span style={{marginLeft:"20px",position:"fixed",top:"363px"}}>淘宝</span>
                    <span style={{marginLeft:"260px",position:"fixed",top:"363px"}}>{flag3?"已绑定":"未绑定"}</span>
                </List.Item>
                <List.Item onClick={() => setFlag4(!flag4)}>
                    <img src='./QQ.png' alt='' width="40px" height="40px"></img>
                    <span style={{marginLeft:"20px",position:"fixed",top:"435px"}}>QQ</span>
                    <span style={{marginLeft:"260px",position:"fixed",top:"435px"}}>{flag4?"已绑定":"未绑定"}</span>
                </List.Item>
                <List.Item onClick={() => setFlag5(!flag5)}>
                    <img src='./微博.png' alt='' width="40px" height="40px"></img>
                    <span style={{marginLeft:"20px",position:"fixed",top:"505px"}}>微博</span>
                    <span style={{marginLeft:"260px",position:"fixed",top:"505px"}}>{flag5?"已绑定":"未绑定"}</span>
                </List.Item>
            </List>
        </div>
    )
}
